import { PureComponent } from 'react'
import { Divider, Input, Select, Button } from 'antd'
import SingleTable from 'components/table/index'
import OperatorManageModal from 'components/modal/operatorManageModal'
import styles from './operatorManage.less'
const { Option } = Select
export default class OperatorManage extends PureComponent {
    state = {
        visible: false
    }
    renderModal (){
        const { visible } = this.state
        return(
            <OperatorManageModal 
              visible={visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            />
        )
    }
    // 新建
    handleAdd =() => {
        this.setState({ visible: true})
    }
    handleOk =() => {
        this.setState({ visible: false})
    }
    handleCancel = () => {
        this.setState({ visible: false})
    }
    render(){
        const dataList = []
        const columns = [
        {
            key: 'gmtCreate',
            title: '包号',
            dataIndex: 'gmtCreate',
            align: 'center',
        },
        {
            key: 'operationTypeName',
            title: '行李牌号',
            dataIndex: 'operationTypeName',
            align: 'center',
        },
        {
            key: 'creatorName',
            title: '舱单号',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '4',
            title: '路径',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '5',
            title: '创建时间',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '6',
            title: '起飞时间',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '7',
            title: '包件数',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '8',
            title: '子单总重(KG)',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '9',
            title: '实际称重(KG)',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '10',
            title: '运单状态',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '18',
            title: '运单状态',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '11',
            title: '查询子单',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '12',
            title: '操作',
            dataIndex: 'creatorName',
            align: 'center',
            render: (text, record) => (
                <span>
                  <a>编辑</a>
                  <Divider type="vertical" />
                  <a >绑定</a>
                  <Divider type="vertical" />
                  <a >删除</a>
                </span>
            )
        }
        ]
        return(
            <div className={styles.operatorManage}>
                <div className={styles.operatorManageBox}>
                    <h2>包单管理</h2>
                </div>
                <div className={styles.operatorManageSearch}>
                    <div className={styles.operatorManageSin}>
                        <span className={styles.operatorManageSpan}>包号：</span>
                        <Input className={styles.operatorManageInput}/>
                    </div>
                    <div className={styles.operatorManageSin} style={{margin: '0 28px'}}>
                        <span className={styles.operatorManageSpan}>行李牌号：</span>
                        <Input className={styles.operatorManageInput}/>
                    </div>
                    <div className={styles.operatorManageSin}>
                        <span className={styles.operatorManageSpan}>舱单号：</span>
                        <Input className={styles.operatorManageInput}/>
                    </div>
                    <div className={styles.operatorManageSin} style={{marginLeft: '28px'}}>
                        <span className={styles.operatorManageSpan}>运单状态：</span>
                        <Select defaultValue="lucy" className={styles.operatorManageInput}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </div>
                </div>
                <div className={styles.operatorManageSearch}>
                    <div className={styles.operatorManageSin}>
                        <span className={styles.operatorManageSpan} >始发港：</span>
                        <Select defaultValue="lucy" className={styles.operatorManageInput}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </div>
                    <div className={styles.operatorManageSin} style={{marginLeft: '28px'}}>
                        <span className={styles.operatorManageSpan}>目的港:</span>
                        <Select defaultValue="lucy" className={styles.operatorManageInput}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </div>
                </div>
                <div className={styles.operatorManageButton}>
                    <Button type="primary" icon="search">查询</Button>
                    <Button icon="plus" style={{margin: '0 24px'}} onClick={this.handleAdd}>新建</Button>
                    <Button icon="import">墨西哥发票</Button>
                    <Button icon="import" style={{margin: '0 24px'}}>导出清单</Button>
                    <Button icon="import">导出商品清单</Button>
                </div>
                <div className={styles.operatorManageTable}>
                    <SingleTable
                        data={{ list: dataList }}
                        columns={columns}
                    />
                </div>
                {this.renderModal()}
            </div>
        )
    }
}